<template>
  <div class="date-range-picker">
    <el-date-picker
      v-model="value"
      style="width: 100%"
      type="daterange"
      :clearable="clearable"
      :disabled="disabled"
      range-separator="-"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      :default-time="[
        new Date(2000, 1, 1, 0, 0, 0),
        new Date(2000, 2, 1, 23, 59, 59),
      ]"
      @change="onChange"
    />
  </div>

</template>

<script>
import {computed, defineComponent, reactive} from 'vue'

export default defineComponent({
  name: 'Index',
  props: {
    startPlaceholder: {
      type: String,
      default: ''
    },
    endPlaceholder: {
      type: String,
      default: ''
    },
    date: {
      type: Array,
      default: []
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    clearable: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    var data = reactive({
      updateDate: []
    })

    const value = computed({
      get() {
        const arr = [].concat(props.date)
        if (arr.length && arr.length > 1) {
          var da = new Date(arr[1])
          var hour = da.getHours() - 8
          da.setHours(hour)
          arr[1] = da
        }
        return arr
      },
      set(val) {
        if (val && val.length && val.length > 1) {
          var da = new Date(val[0])
          var hour = da.getHours() + 8
          da.setHours(hour)
          const str = da.toISOString().replace('.000Z', '+08:00')
          val[0] = str

          var da1 = new Date(val[1])
          var hour1 = da1.getHours() + 8
          da1.setHours(hour1)
          const str1 = da1.toISOString().replace('.000Z', '+08:00')
          val[1] = str1
        }

        data.updateDate = val

        emit('update:date', val)

        return props.date
      }
    })

    const onChange = (value) => {
      emit('change', data.updateDate)
    }

    const onBlur = (value) => {
      emit('blur', data.updateDate)
    }

    const onFocus = (value) => {
      emit('focus', data.updateDate)
    }

    return {
      value,

      onChange,
      onBlur,
      onFocus
    }
  }
})
</script>

<style scoped>

</style>
